<template>

	<view class="page">
		<u-navbar :bgColor="bgColor" :fixed="false" title="随访确认" @rightClick="rightClick" :autoBack="true"></u-navbar>

		<view class="itema">

			<view class="sfdx">随访计划标题</view>
			<u--input disabled placeholder="请输入随访计划标题" border="surround" v-model="name"></u--input>

			<view class="row_a_c" style="margin-top: 80rpx;">
				<view class="xxx"></view>
				<view class="stitle">随访计划详情</view>
			</view>




			<!-- 动态渲染的 item 元素 -->
			<view v-for="(item, index) in config" :key="index" class="item">

				<view class="row_a_c space-between">
					<view class="row_a_c" style="margin-top: 50rpx;">
						<image class="oneaaa" src="/static/images/one.png"></image>
						<view class="oname">第{{index+1}}次随访任务</view>
					</view>
				</view>

				<view class="numjh">
					<view class="row_a_c">
						<view class="sfts">随访时间(天)</view>
						<u-number-box disabled="" class="ttt" v-model="item.day"></u-number-box>
					</view>
					<view class="sfname">
						<u--input disabled placeholder="请输入随访计划名称" border="surround" v-model="item.name"></u--input>
					</view>
					<view class="txsra">
						<u--textarea disabled v-model="item.content" placeholder="请输入随访内容"></u--textarea>
					</view>
					<uni-data-select disabled v-if="item.status==1" placeholder="请选择随访人员" v-model="item.staff.value" :localdata="teamListData"></uni-data-select>
					<uni-data-select v-else placeholder="请选择随访人员" v-model="item.staff" :localdata="teamListData"></uni-data-select>
				</view>




				<view class="haha" v-if="item.status==0">
					<view class="jxmaab row_a_c center" @click="followPlanConfirmFuc(item)">
						<view class="tnamea">确认随访</view>
					</view>
				</view>

				<view class="haha" v-else>
					<view class="jxmaab row_a_c center" style="background:#F7F7F7;">
						<view class="tnamea" style="color: red;">已随访</view>
					</view>
				</view>


			</view>
			<!-- item================================= -->










		</view>

	</view>
</template>
<script>
	import api_follow from '@/api/follow.js';
	export default {

		async onShow() {
			this.access_token = uni.getStorageSync('access_token');
			if (!this.access_token) {
				uni.navigateTo({
					url: '/pages/auth/login'
				});
			} else {
				this.followPlanDetailFuc(); //随访确认详情
				this.teamListFuc(); //获取团队列表
			}
		},

		async onLoad(option) {
			this.plan = option.id;
			console.log('plan', this.plan);
		},


		data() {
			return {
				staff: null,
				code: 666666,
				teamListData: [],
				plan: null,
				access_token: null,
				mode: 1, //随访模式 1一次性 2多次性
				name: null,
				config: [{
					day: 1,
					name: null,
					content: null,
				}],
				bgColor: 'rgba(0, 31, 63, 0)',

			};
		},
		methods: {

			//确认随访
			async followPlanConfirmFuc(item) {

				console.log('item', item);
				var per = {
					plan: this.plan,
					step: item.id,
					staff: item.staff,
					code: '666666',
				}
				const res = await api_follow.followPlanConfirm(per);
				if (res.code == 1) {
					this.followPlanDetailFuc();
					uni.$u.toast('成功')

				} else {
					this.$util.msg(res.message);
					return;
				}
			},






			//随访确认详情
			async followPlanDetailFuc() {
				var per = {
					plan: this.plan
				}
				const res = await api_follow.followPlanDetail(per);
				if (res.code == 1) {
					this.config = res.data.info.config;



					this.name = res.data.info.name;
					this.mode = res.data.info.mode;


					this.config = this.config.map(item => {
						if (item.staff) {
							item.staff = {
								value: item.staff.id,
								text: item.staff.name,
							};
						}
						return item;
					});




				} else {
					this.$util.msg(res.message);
					return;
				}
			},

			//获取团队列表
			async teamListFuc() {
				var per = {
					no_page: 1,
					page_size: 100,
				}
				const res = await api_follow.teamList(per);
				if (res.code == 1) {
					this.teamListData = res.data.list;
					this.teamListData = this.teamListData.map(item => ({ value: item.id, text: item.name }));
				} else {
					this.$util.msg(res.message);
					return;
				}
			},


			toUrl(url) {
				this.navTo(url);
			},
		},
	};
</script>
<style scoped lang="scss">
	.page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 使页面占满整个视窗 */
	}

	.itema {
		width: 690rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-top: 16rpx;
		margin-left: 30rpx;
	}

	.sfdx {
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
		margin-bottom: 32rpx;
		margin-top: 50rpx;
	}

	::v-deep .u-border {
		height: 76rpx;
		background: #FAFAFA;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border-width: 0rpx !important;
	}

	.redjy {
		font-weight: 400;
		font-size: 20rpx;
		color: #FF0000;
		margin-top: 16rpx;
	}


	::v-deep .uni-select {
		background: #FAFAFA;
		font-size: 28rpx;
		border: 0px solid #e5e5e5;
		border-bottom: solid 0px #e5e5e5;
		height: 76rpx;
	}

	.xxx {
		width: 8rpx;
		height: 32rpx;
		background: linear-gradient(180deg, #EBF6F6 0%, #27CCBB 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 16rpx;
	}

	.stitle {
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.85);
	}

	.oneaaa {
		width: 48rpx;
		height: 48rpx;
		margin-right: 24rpx;
	}

	.oname {
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.85);
	}

	.numjh {
		width: 620rpx;
		margin-left: 70rpx;
		padding-top: 34rpx;
	}



	.txsra {
		width: 620rpx;
		height: 196rpx;
		background: #FAFAFA;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-top: 16rpx;
		padding: 32rpx;
		margin-bottom: 30rpx;
	}

	::v-deep .u-textarea {
		background-color: #FAFAFA !important;
		padding: 0px !important;
	}

	.haha {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 100rpx;
	}

	.jxmaab {
		width: 200rpx;
		height: 60rpx;
		background: rgba(39, 204, 187, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-top: 30rpx;


	}

	.tss {
		width: 40rpx;
		height: 40rpx;
		margin-top: 50rpx;
	}

	.jxm {
		width: 32rpx;
		height: 32rpx;
		margin-right: 16rpx;
	}

	.ttt {
		margin-bottom: 20rpx;
	}

	.tnamea {
		font-weight: 400;
		font-size: 24rpx;
		color: #27CCBB;
	}

	.sfts {
		margin-bottom: 10rpx;
		margin-right: 50rpx;
	}

	.sfname {
		margin-top: 20rpx !important;
	}

	.butt {
		width: 690rpx;
		height: 80rpx;
		background: #27CCBB;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-bottom: 100rpx;


	}
</style>